<template>
    <div id="app">
        <el-container style="height: 500px; border: 1px solid #eee">
            <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
                <el-menu router :default-openeds="['0', '1']">
                    <el-submenu
                        v-for="(item, index) in $router.options.routes"
                        :key="item.name"
                        :index="index + ''"
                    >
                        <template slot="title">
                            <i class="el-icon-user"></i>
                            {{ item.name }}
                        </template>
                        <el-menu-item
                            v-for="(item2, index2) in item.children"
                            :key="index2"
                            :index="item2.path"
                            :class="$route.path == item2.path ? 'is-active' : ''"
                        >
                            {{ item2.name }}
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>

            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </div>
</template>

<style>
.el-header {
    background-color: #b3c0d1;
    color: #333;
    line-height: 60px;
}

.el-aside {
    color: #333;
}
</style>

<script>
export default {
    data() {
        const item = {
            uid: 10086,
            name: 'admin',
            deptId: '001',
            pwd: 'admin',
            alisName: '管理员',
            status: 'enable',
            createTime: '2021',
            phone: '100861008611',
            sex: 'man',
            email: 'admin@163.com',
            deleted: false,
        };
        return {
            tableData: Array(20).fill(item),
        };
    },
};
</script>
